而且你早就看懂了,後面帶了一個參數,{title:'Express'},意思就是index.ejs被回傳會去後,只要有呼叫title這個參數,就會帶入"Express字串" 這個值。而在ejs模板中,呼叫的方法就是<%= 參數 %>,這也就是為什麼我們開啟網頁會看到Express的字樣,而靜態就只會顯示原始程式碼<%= title %>。
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {
title: 'Express',
haha: '哈哈',
ironMan30: '30天鐵人賽',
theTweenty: '第20天'
});
});
module.exports = router;
增加了三個參數:
haha: '哈哈',
ironMan30: '30天鐵人賽',
theTweenty: '第20天'
程式碼有換行是為了方便閱讀,不影響執行(要寫在同一行也OK),參數通常用逗號,分隔。
我們也在index.ejs中增加呼叫這些參數的地方,原本檔案中有<%= title %>與Welcome to <%= title %>,我們從Welcom後面開始增加:
<!-- 修改我們的參數呼叫 -->
<h1><%= title %></h1>
<p>Welcome to <%= ironMan30 %><%= theTweenty %></p>
<h2><%= haha %></h2>
完成後存檔,修改前端的檔案,只要重新整理瀏覽器,修改後端的檔案,大多要重新啟動伺服器。
重新啟動後:
我們完成了後端傳送參數給前端的動作,別小看這部分喔!
想想看,登入會員後看到的頁面,是不是通常都會有專屬您的ID呢?這就是一個應用!這樣的用法無處不在。